<template>
  <div id="gDl">

    <div id="hotSlide">
      <div  v-for="(i,index) in topGames"  @click="gameDetail(index,'tGame')"><img :src="i"></div>
    </div>

  <div id="newGames">

      <span class="title">本周新游</span><span class="more" @click="gomore('本周新游')">显示更多 ></span>
      <div><div><img  v-for="(i,index) in newGames" :src="i" @click="gameDetail(index,'nGames')"></div></div>

  </div>

  <div id="gamesClass">
      <span class="title">游戏分类</span><!--<span class="more">显示更多 ></span>-->
      <div><img v-for="(i,index) in classGames" :src="i"></div>
  </div>

  <div id="gamesRank">
      <span class="title">本月排行</span><span class="more" @click="gomore('本月排行')">显示更多 ></span>
  </div>
  
  <div id="items">
    <div id="rankItem" v-for="(i,index) in items" @click="gameDetail(index,'rGames')">
        <span class="rankNum">{{i.rank}}</span>
        <img :src="getSrc(i)">
        <span class="rankName">{{i.name}}</span>
    </div>
  </div>
</template>

<script>
  export default {
  name: 'app',
  data () {
    return {
      tGame:{
        0:"hearthstone",
        1:"aaaaa",
        2:"ccccc"
      },
      nGames:{
        0:"ddddd",
        1:"eeeee",
        2:"fffff",
        3:"ggggg",
        4:"hhhhh",
        5:"iiiii",
      },
      cGames:{
        0:"hearthstone",
        1:"aaaaa",
        2:"FFFFFFFFF"
      },
      rGames:{
        0:"jjjjj",
        1:"kkkkk",
        2:"lllll",
        3:"mmmmm",
        4:"nnnnn",
        5:"ooooo",
        6:"ppppp"
      },
      items:{
        0:{
          rank:"1",
          picSrc:"./src/assets/r1.png",
          name:"皇室战争"
        },
       1:{
          rank:"2",
          picSrc:"./src/assets/r2.png",
          name:"我的世界盒子"
        },
        2:{
          rank:"3",
          picSrc:"./src/assets/r3.png",
          name:"建桥专家"
        },
        3:{
          rank:"4",
          picSrc:"./src/assets/r4.png",
          name:"球球大作战"
        },
        4:{
          rank:"5",
          picSrc:"./src/assets/r5.png",
          name:"卡扎生活：医院"
        },
        5:{
          rank:"6",
          picSrc:"./src/assets/r6.png",
          name:"我的世界"
        },
        6:{
          rank:"7",
          picSrc:"./src/assets/r7.png",
          name:"爷爷的城市"
        },
        7:{
          rank:"8",
          picSrc:"./src/assets/r1.png",
          name:"皇室战争"
        },
      },
      topGames:[
        "../src/assets/gDlpic01.png",
        "../src/assets/gDlpic02.png",
        "../src/assets/gDlpic03.png"
      ],
      newGames:[
        "../src/assets/gDlpic11.png",
        "../src/assets/gDlpic22.png",
        "../src/assets/gDlpic33.png",
        "../src/assets/gDlpic44.png",
        "../src/assets/gDlpic55.png",
        "../src/assets/gDlpic66.png"
      ],
      classGames:[
        "../src/assets/gDlpic111.png",
        "../src/assets/gDlpic222.png",
        "../src/assets/gDlpic333.png"
      ],
    }
  },
  methods: {
            gameDetail(i,type){
                console.log(123);
                var id=this[type][i];
                
                this.$store.commit("game",id)
                //this.$store.commit("changeStyle",1);
                this.$router.push({path: 'gameDetail/gDetail1'})
            },

            getSrc(i){
              return i.picSrc;
            },

            gomore(title){
              this.$store.commit('more',title);
              this.$router.push({path: 'more'});
            }
            

        }
}
</script>

<style>
#gDl{
  padding-top: 14%;
   background: url("../assets/homeBg.png") no-repeat;
   background-size: 100% 100%
}
#hotSlide {
  
  height: 200px;
  width: 100%;
}
#hotSlide div{
  float: left;
  border:solid 1px black;
  height: 200px;
  margin-top: 0;
  position: relative;
  width: 32%;
  margin-left: 1%;
  overflow: hidden;
}
#newGames{
  margin-top: 3%;
  padding-bottom:6% ;
  width: 100%;
  border-bottom: 2px #22b2d6 solid;
}
#gamesClass{
  margin-top: 3%;
  padding-bottom:6% ;
  width: 100%;
  border-bottom: 2px #22b2d6 solid;
}
#gamesClass img{
  height: 150px;
  width: 30%;
  border:solid 1px black;
  margin-left: 1.5%;
  margin-right: 1.5%;
  margin-top: 10%
}
#newGames img{
  height: 120px;
  width: 12%;
  border:solid 1px black;
  margin-left: 1.5%;
  margin-right: 1.5%;
  margin-top: 10%
}
#gamesRank{
  background-color: blue;
  margin-top: 3%;
  width: 100%;
}
.rankName{
  font-size: 350%;
  color: #a6c5d5;
}
 .rankNum{
  font-size: 450%;
  color: #ccc;
}
#items{
  margin-top: 15%
}
 #rankItem{
  text-align: left;
  margin-top: 2%;
  margin-left: 6%;
}
 #rankItem img{
   vertical-align: center;
   height: 100px;
   width: 10%;
   background-color: black;
   margin-left: 3%;
   margin-right: 8%;
   margin-top: -4%;  
 }
#gDl .title{
  position: absolute;
 font-size: 300%;
 margin-top: 2%;
  left: 2%;
  color: #ccc;
}
#gDl .more{
  position: absolute;
  font-size: 250%;
 right:2%;
  margin-top: 2%;
   color: #8d8d8d;
}
</style>
